<template>
  <div class="search">
    <div class="search-header">
      <van-icon name="more-o" />
      <!-- <van-field placeholder="请输入用户名" /> -->
      <div>
        <input type="text" placeholder="搜索" />
      </div>
      <van-icon name="award" />
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in slideshow" :key="index">
        <img :src="item.imageUrl" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 每日推荐 私人FM-->
    <van-row type="flex" justify="space-around">
      <van-col span="4" @click="everydaySong"
        ><div class="icon_nav1">
          <p class="iconfont icon-alituijianbaobiao2"></p>
          <i>每日推荐</i>
        </div></van-col
      >
      <van-col span="4"
        ><div class="icon_nav2">
          <div class="icon_nav1">
            <p class="iconfont icon-aliweibiaoti-"></p>
            <i>私人FM</i>
          </div>
        </div></van-col
      >
      <van-col span="4" @click="boutiqueSong"
        ><div class="icon_nav3">
          <div class="icon_nav1">
            <p class="iconfont icon-aligedan"></p>
            <i>歌单</i>
          </div>
        </div></van-col
      >
      <van-col span="4" @click="rankinglist"
        ><div class="icon_nav4">
          <div class="icon_nav1">
            <p class="iconfont icon-aliphb"></p>
            <i>排行榜</i>
          </div>
        </div></van-col
      >
      <van-col span="4"
        ><div class="icon_nav5">
          <div class="icon_nav1">
            <p class="iconfont icon-alizhuanji"></p>
            <i>数字专辑</i>
          </div>
        </div></van-col
      >
    </van-row>
    <div class="line3"></div>

    <!-- 推荐歌单 -->
    <div class="recommend">
      <div class="recom_left">推荐歌单💖</div>
      <div class="recom_right" @click="moreSong">
        更多<van-icon name="arrow" class="van" />
      </div>
    </div>
    <van-row type="flex" justify="space-around">
      <van-col
        span="8"
        v-for="(item, index) in SongList"
        :key="index"
        @click="handleSongDetail(item.id)"
      >
        <div class="songList">
          <img :src="item.picUrl" alt="" />
          <p style="line-height: 17px; text-align: left">
            {{ item.name }}
          </p>
          <div class="count">▷{{ parseInt(item.playCount / 10000) }}万</div>
        </div>
      </van-col>
    </van-row>
    <!-- 歌单详情 -->

    <!-- 分界线 -->
    <div class="line"></div>

    <!-- 猜你喜欢 -->
    <div class="Like">
      <div class="Like_left">
        <p>猜你喜欢</p>
        <h2>最好听的Beat都在这</h2>
      </div>
      <div class="Like_right">
        <span class="sp1"><van-icon name="plus" class="plus" />添加</span>
        <span class="sp2">不感兴趣</span>
      </div>
    </div>

    <!-- 歌曲列表 -->
    <div class="singSong">
      <ul>
        <li v-for="(item, index) in like" :key="index" @click="gun(item.id)">
          <img :src="item.al.picUrl" alt="" class="img1" />
          <div class="Img_right">
            <p class="p1">
              {{ item.name }}&nbsp;<span>-{{ item.ar[0].name }}</span>
            </p>
            <p class="p2">{{ item.al.name }}</p>
          </div>
          <div class="bofangdian">
            <i><van-icon name="play-circle-o" class="spnc1" /></i>
            <i><van-icon name="ellipsis" class="spnc2" /></i>
          </div>
        </li>
      </ul>
    </div>

    <!-- 分界线 -->
    <div class="line2"></div>

    <!-- 远离纷扰歌单 -->
    <div class="radar">
      <div class="recom_left">『轻音』远离纷扰 感受内心的宁静</div>
      <div class="recom_right">更多<van-icon name="arrow" class="van" /></div>
    </div>
    <van-row type="flex" justify="space-around">
      <van-col
        span="8"
        v-for="(item, index) in romance"
        :key="index"
        @click="handleSongDetail(item.id)"
      >
        <div class="songList">
          <img :src="item.coverImgUrl" alt="" />
          <p style="line-height: 17px; text-align: left">
            {{ item.name }}
          </p>
          <div class="count">▷{{ parseInt(item.playCount / 10000) }}万</div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import instance from "@/utils/request";
import { Swipe, SwipeItem } from "vant";
import { Icon } from "vant";
import { Col, Row } from "vant";
import { getToken, setToken } from "../../utils/auth";
import "../../assets/icon_everyDay/iconfont.css";
import axios from "axios";
export default {
  data() {
    return {
      slideshow: [], //轮播图
      SongList: [], //推荐歌单
      Songs: [], //获取歌单所有歌曲
      everySong: [], //每日推荐
      romance: [], //通过分类接口调取歌单
      like: [], //猜你喜欢歌曲
    };
  },
  computed: {
    param() {
      return `cookie=${localStorage.getItem(
        "cookie"
      )}&timestamp=${new Date().getTime()}`;
    },
  },
  watch: {},
  methods: {
    //排行榜
    rankinglist() {
      this.$router.push("/rankinglist");
    },
    //远离纷扰歌单
    async initConfusion() {
      const result = await axios.get(
        "http://192.168.31.27:3000/playlist/catlist?" + this.param
      );
      // console.log("远离纷扰，歌单分类", result);
      //获取分类的随机数
      const random = Math.floor(
        Math.random() * Math.floor(result.data.sub.length)
      );
      // console.log(random);
      //获取 浪漫 歌单
      const romance = result.data.sub[random].name;
      // console.log(romance);
      //通过分类接口调取歌单
      const res = await axios.get(
        "http://192.168.31.27:3000/top/playlist/highquality?" + this.param,
        {
          params: {
            cat: romance,
            limit: 6,
          },
        }
      );
      // console.log("通过分类调取歌单", res);
      this.romance = res.data.playlists;
      // //获取分类的随机数
      // let randoms = Math.floor(Math.random() * Math.floor(10));
      // //获取随机歌单的id
      // let id = res.data.playlists[randoms].id;
      // console.log(id);
      // //通过歌单id调取歌单列表
      const results = await axios.get(
        "http://192.168.31.27:3000/playlist/track/all?" + this.param,
        {
          params: {
            id: 6620660821,
            limit: 3,
          },
        }
      );
      // console.log(results);
      this.like = results.data.songs;
    },
    //歌单
    async boutiqueSong() {
      this.$router.push("/gedansquare");
    },
    //推荐歌单 更多/
    moreSong() {
      this.$router.push("/gedansquare");
    },
    //点击每日推荐跳转daily界面
    handleDaily() {
      this.$router.push("/daily");
    },
    //轮播图接口
    slideShow() {
      axios
        .get(
          "http://192.168.31.27:3000/banner?cookie=" +
            localStorage.getItem("cookie") +
            "&timestamp=" +
            new Date().getTime(),
          { withCredentials: true }
        )
        .then((res) => {
          // console.log("轮播图接口数据", res);
          this.slideshow = res.data.banners;
        });
    },
    //每日推荐
    everydaySong() {
      this.$router.push("/daily");
    },
    //推荐歌单
    _initSongList() {
      axios
        .get("http://192.168.31.27:3000/personalized?" + this.param, {
          params: {
            limit: 6,
          },
        })
        .then((res) => {
          // console.log("推荐歌单", res);
          this.SongList = res.data.result;
        });
    },
    //获取歌单所有歌曲
    handleSongDetail(id) {
      this.$router.push("/songlistdetails/" + id);
    },
    //跳转播放页
    gun(id) {
      this.$router.push("/playpage/" + id);
    },
  },
  created() {
    this.slideShow();
    const id = 24381616;
    this._initSongList(id);
    this.initConfusion(); //远离纷扰歌单
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.search {
  padding: 0 0 120px;
}
.search-header {
  display: flex;
  justify-content: space-around;
  height: 40px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #eeeeec;
  z-index: 9999;
}
.search-header > div {
  width: 75%;
  border-radius: 30px;
  height: 30px;
  margin-top: 5px;
  background: white;
  text-indent: 2em;
}
.search-header > div input {
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
}
.search-header i {
  width: 10%;
  text-align: center;
  line-height: 40px;
  font-size: 22px;
}
.my-swipe {
  margin-top: 30px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #fff;
  margin-bottom: 25px;
}

.van-swipe-item {
  height: 150px;
  border-radius: 15px;
  margin-top: 25px;
}
.van-swipe-item img {
  height: 150px;
  width: 350px;
  border-radius: 15px;
}
/* 每日推荐*/
.van-row {
  text-align: center;
  line-height: 25px;
  /* margin-top: 20px; */
}
.icon_nav1 {
  height: 50px;
}
.iconfont {
  line-height: 50px;
  margin: 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 27px;
  color: #cc5567;
  background-image: linear-gradient(to bottom right, #cc556744, #fff);
}
i {
  color: #333;
}
/* 推荐歌单 */
.radar {
  height: 30px;
  padding: 7px 12px 10px;
  display: flex;
  justify-content: space-between;
}
.recommend {
  height: 30px;
  padding: 25px 12px 10px;
  margin-top: -7px;
  display: flex;
  justify-content: space-between;
}
.recom_left {
  line-height: 30px;
  font-size: 18px;
  font-weight: bold;
}
.recom_right {
  line-height: 30px;
  font-size: 14px;
  border: 1px solid #cecece;
  width: 65px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #424141;
  border-radius: 20px;
}
.recom_right:hover {
  background: #d85a6d;
  color: #fff;
  border: none;
}
.recom_right:hover .van {
  color: #fff;
}
.songList {
  width: 105px;
  margin: 0 auto;
  position: relative;
}
.songList img {
  width: 105px;
  border-radius: 13px;
}
/* 分割线 */
.line {
  height: 15px;
  background: #f8f8f8;
  margin-top: 35px;
  border-radius: 20px;
}
.line2 {
  height: 15px;
  background: #f8f8f8;
  margin-top: 51px;
  border-radius: 20px;
  margin-bottom: 27px;
}
.line3 {
  height: 15px;
  background: #f8f8f8;
  margin-top: 45px;
  border-radius: 20px;
}
.Like .Like_left {
  float: left;
  margin-left: 14px;
  margin-top: 20px;
}
.Like .Like_left p {
  color: #5a7cab;
}
.Like .Like_left h2 {
  font-size: 18px;
  font-weight: bolder;
  margin-top: 9px;
}
.Like .Like_right {
  width: 150px;
  height: 20px;
  margin-top: 30px;
  float: right;
  display: flex;
}
.Like .Like_right .sp1,
.Like .Like_right .sp2 {
  font-size: 13px;
  width: 65px;
  height: 25px;
  border: 1px solid #cecece;
  line-height: 25px;
  text-align: center;
  border-radius: 20px;
  display: block;
  color: #424141;
}
.Like .Like_right .sp2 {
  margin-left: 5px;
}
.Like .Like_right .sp2:hover {
  background: #d85a6d;
  color: #fff;
  border: none;
}
.Like .Like_right .sp1:hover {
  background: #d85a6d;
  color: #fff;
  border: none;
}
.Like_right .sp1:hover .plus {
  color: #fff;
}
/* 歌曲列表 */
.singSong {
  /* height: 180px; */
  margin-top: 65px;
  clear: both;
}
.singSong li {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #f1f1f1;
}
.singSong .Img_right {
  flex: 1;
  padding: 16px 5px;
}
.singSong .Img_right .p1 {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 17px;
}
.singSong .Img_right .p1 span {
  color: #acacac;
  font-size: 12px;
}
.singSong .Img_right .p2 {
  color: #acacac;
  margin-top: 5px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.singSong .img1 {
  padding: 5px 10px;
  width: 55px;
  height: 55px;
  border-radius: 15px;
}
/* 推荐歌单播放量 */
.songList .count {
  width: 55px;
  padding: 0 5px;
  height: 20px;
  text-align: center;
  background: rgb(14, 14, 14);
  opacity: 0.7;
  line-height: 20px;
  border-radius: 20px;
  color: #fff;
  position: absolute;
  top: 4px;
  right: 4px;
}
.songList .count .bofang {
  color: #fff;
}
.bofangdian {
  line-height: 76px;
  padding: 0 10px;
}
.bofangdian .spnc1 {
  padding: 0 15px;
  font-size: 20px;
  color: #acacac;
}
.bofangdian .spnc2 {
  color: #acacac;
  font-size: 18px;
}
</style>
